<template>
  <section class="page">
    <def-page
      v-if="pageOptions?.length"
      :options="pageOptions"
      :data="tableData"
      :attrs="pageAttrs"
      :pageSize="10"
      :total="total"
      @get="onGetList"
      @add="onRowAdd"
      @edit="onRowEdit"
      @del="onRowDel">
      <template #username="{ row, $index }"> {{ row.username }} -- {{ $index }} </template>
      <template #password="{ row }">
        {{ row.password }}
        <img src="@/assets/images/logo.png" alt="logo" style="width: 100px" />
      </template>
      <template #select="{ row }">{{ getLabel(selectData, row.select) }}</template>
      <template #radio="{ row }">{{ getLabel(radioData, row.radio) }}</template>
      <template #checkbox="{ row }">{{ getLabel(checkboxData, row.checkbox) }}</template>
    </def-page>
  </section>
</template>

<script lang="ts" setup>
import { ref, unref } from 'vue'
import { IPageAttrs, IPageOptions } from '@/base-ui/page/types'
import { IChildrenData } from '@/base-ui/form/types'

// 页面配置
const selectData = ref<IChildrenData[]>([])
const radioData = ref<IChildrenData[]>([])
const checkboxData = ref<IChildrenData[]>([])
const cascaderData = ref<IChildrenData[]>([])
const pageOptions = ref<IPageOptions[]>([])

// 获取字典值
const getLabel = (list: any[], value: string | any[], separator = ',') => {
  list = unref(list)
  if (!Array.isArray(value)) {
    return list.find((item: any) => {
      if (item.value !== value) {
        if (item.children?.length) {
          return getLabel(item.children, value, separator)
        }
      }
      return item.value === value
    })?.label
  }
  return value.reduce(
    (prev, next) =>
      list.find((item: any) => item.value === prev)?.label +
      separator +
      list.find((item: any) => item.value === next)?.label
  )
}

const initData = () => {
  setTimeout(() => {
    selectData.value = [
      {
        label: '吃饭',
        value: 'eat'
      },
      {
        label: '睡觉',
        value: 'sleep'
      },
      {
        label: '学习',
        value: 'learn'
      }
    ]
    radioData.value = [
      {
        label: '单选1',
        value: '1'
      },
      {
        label: '单选2',
        value: '2'
      }
    ]
    checkboxData.value = [
      {
        label: '多选框1',
        value: '1'
      },
      {
        label: '多选框2',
        value: '2'
      }
    ]
    cascaderData.value = [
      {
        value: 'guide',
        label: 'Guide',
        children: [
          {
            value: 'disciplines',
            label: 'Disciplines',
            children: [
              {
                value: 'consistency',
                label: 'Consistency'
              },
              {
                value: 'feedback',
                label: 'Feedback'
              },
              {
                value: 'efficiency',
                label: 'Efficiency'
              },
              {
                value: 'controllability',
                label: 'Controllability'
              }
            ]
          },
          {
            value: 'navigation',
            label: 'Navigation',
            children: [
              {
                value: 'sidenav',
                label: 'SideNavigation'
              },
              {
                value: 'topnav',
                label: 'TopNavigation'
              }
            ]
          }
        ]
      },
      {
        value: 'component',
        label: 'Component',
        children: [
          {
            value: 'basic',
            label: 'Basic',
            children: [
              {
                value: 'layout',
                label: 'Layout'
              },
              {
                value: 'color',
                label: 'Color'
              },
              {
                value: 'typography',
                label: 'Typography'
              },
              {
                value: 'icon',
                label: 'Icon'
              },
              {
                value: 'button',
                label: 'Button'
              }
            ]
          },
          {
            value: 'form',
            label: 'Form',
            children: [
              {
                value: 'radio',
                label: 'Radio'
              },
              {
                value: 'checkbox',
                label: 'Checkbox'
              },
              {
                value: 'input',
                label: 'Input'
              },
              {
                value: 'input-number',
                label: 'InputNumber'
              },
              {
                value: 'select',
                label: 'Select'
              },
              {
                value: 'cascader',
                label: 'Cascader'
              },
              {
                value: 'switch',
                label: 'Switch'
              },
              {
                value: 'slider',
                label: 'Slider'
              },
              {
                value: 'time-picker',
                label: 'TimePicker'
              },
              {
                value: 'date-picker',
                label: 'DatePicker'
              },
              {
                value: 'datetime-picker',
                label: 'DateTimePicker'
              },
              {
                value: 'upload',
                label: 'Upload'
              },
              {
                value: 'rate',
                label: 'Rate'
              },
              {
                value: 'form',
                label: 'Form'
              }
            ]
          }
        ]
      }
    ]
    pageOptions.value = [
      {
        label: '用户名',
        prop: 'username',
        formItem: {
          element: 'input',
          value: '',
          query: true,
          rules: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, message: '长度不低于3位', trigger: 'blur' }
            // { validator: validateAccount, trigger: 'blur' }
          ],
          attrs: {
            input: {
              type: 'text',
              placeholder: '请输入账号',
              clearable: true
            }
          }
        },
        tableColumn: {
          fixed: true
        }
      },
      {
        label: '密码',
        prop: 'password',
        formItem: {
          element: 'input',
          value: '',
          rules: [
            {
              required: true,
              message: '密码不能为空',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度必须在6-15位',
              trigger: 'blur'
            }
          ],
          attrs: {
            input: {
              type: 'password',
              placeholder: '请输入密码',
              clearable: true,
              showPassword: true
            }
          }
        }
      },
      {
        label: '下拉框选择',
        prop: 'select',
        formItem: {
          element: 'select',
          value: '',
          query: true,
          rules: [
            {
              required: true,
              message: '爱好不能为空',
              trigger: 'change'
            }
          ],
          attrs: {
            select: {
              placeholder: '请选择爱好',
              clearable: true
            }
          },
          subElement: 'option',
          children: selectData.value
        }
      },
      {
        label: '日期选择',
        prop: 'date',
        formItem: {
          element: 'date-picker',
          value: '',
          rules: {
            required: true,
            message: '日期不能为空',
            trigger: 'change'
          },
          attrs: {
            datePicker: {
              placeholder: '请选择日期',
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD'
            }
          }
        }
      },
      {
        label: '时间选择',
        prop: 'time',
        formItem: {
          element: 'time-picker',
          value: '',
          rules: {
            required: true,
            message: '时间不能为空',
            trigger: 'change'
          },
          attrs: {
            timePicker: {
              placeholder: '请选择时间',
              format: 'HH:mm:ss'
            }
          }
        }
      },
      {
        prop: 'switch',
        label: '开关',
        formItem: {
          element: 'switch',
          value: false
        }
      },
      {
        label: '单选框',
        prop: 'radio',
        formItem: {
          element: 'radio-group',
          value: '',
          rules: {
            required: true,
            message: '单选框不能为空',
            trigger: 'change'
          },
          subElement: 'radio',
          children: radioData.value
        }
      },
      {
        label: '多选框',
        prop: 'checkbox',
        formItem: {
          element: 'checkbox-group',
          value: [],
          rules: {
            required: true,
            message: '多选框不能为空',
            trigger: 'change'
          },
          subElement: 'checkbox',
          children: checkboxData.value
        }
      },
      {
        label: '颜色选择',
        prop: 'color',
        formItem: {
          element: 'color-picker',
          value: '',
          rules: [
            {
              required: true,
              message: '请选择一个颜色',
              trigger: 'change'
            }
          ]
        }
      },
      {
        label: '数字选择',
        prop: 'number',
        formItem: {
          element: 'input-number',
          value: 0
        }
      },
      {
        label: '评分',
        prop: 'rate',
        formItem: {
          element: 'rate',
          value: 0
        }
      },
      {
        label: '滑块',
        prop: 'slider',
        formItem: {
          element: 'slider',
          value: 0
        }
      },
      {
        label: '级联选择器',
        prop: 'cascader',
        formItem: {
          element: 'cascader',
          value: '',
          children: cascaderData.value
        }
      },
      {
        label: '图标选择器',
        prop: 'iconPicker',
        formItem: {
          element: 'def-icon-picker',
          value: ''
        }
      },
      {
        label: '行政区选择器',
        prop: 'regionPicker',
        formItem: {
          element: 'def-region-picker',
          value: '',
          attrs: {
            regionPicker: {
              props: {
                label: 'name',
                value: 'code'
              }
            }
          }
        }
      },
      {
        label: '上传',
        prop: 'upload',
        formItem: {
          element: 'def-upload',
          value: [],
          layout: {
            xs: 24,
            sm: 24,
            md: 24,
            lg: 12,
            xl: 12
          },
          attrs: {
            upload: {
              disabled: false,
              listType: 'picture-card',
              limit: 3,
              hiddenTip: false,
              style: {
                width: '100%',
                height: '150px'
              }
            }
          }
        }
      },
      {
        label: '文本域',
        prop: 'textarea',
        formItem: {
          element: 'input',
          value: '',
          attrs: {
            input: {
              type: 'textarea',
              placeholder: '请输入文本'
            }
          },
          layout: {
            xs: 24,
            sm: 24,
            md: 24,
            lg: 24,
            xl: 24
          },
          style: {
            height: '300px',
            width: '100%'
          }
        }
      },
      {
        label: '富文本编辑器',
        prop: 'editor',
        formItem: {
          element: 'def-editor',
          value: '',
          layout: {
            xs: 24,
            sm: 24,
            md: 24,
            lg: 24,
            xl: 24
          },
          attrs: {
            editor: {
              style: {
                height: '600px'
              }
            }
          }
        }
      },
      {
        label: '操作',
        prop: 'action',
        formItem: {
          element: 'button',
          value: '',
          query: true,
          actionType: 'form',
          actionAttrs: {
            // plain: true
          },
          action: [],
          layout: {
            xs: 24,
            sm: 24,
            md: 24,
            lg: 24,
            xl: 24
          }
        },
        queryFormItem: {
          element: 'button',
          value: '',
          actionType: 'query'
        },
        tableColumn: {
          fixed: 'right'
        }
      }
    ]
  }, 1000)
}
initData()

const pageAttrs: IPageAttrs = {
  queryForm: {},
  dialog: {},
  dialogForm: {},
  table: {
    size: 'default'
  },
  pagination: {
    // pageSizes: [10, 20, 30, 40, 50]
  }
}

const tableData = ref<any[]>([
  /*  {
    id: 111,
    username: '1',
    password: '11'
  },
  {
    id: 222,
    username: '2',
    password: '22'
  },
  {
    id: 333,
    username: '3',
    password: '33'
  } */
])

// 分页查询
const total = ref(0)
const onGetList = (params: any) => {
  console.log('params:', params)
  if (params.page === 1) {
    tableData.value = [
      {
        id: 111,
        username: 'DefChigga',
        password: '123456',
        select: 'learn',
        date: '2022-06-20',
        time: new Date(),
        switch: false,
        radio: '2',
        checkbox: ['1', '2'],
        color: '#123456',
        number: 6,
        rate: 3,
        slider: 66,
        cascader: 'feedback',
        iconPicker: 'check',
        regionPicker: ['110000', '110100', '110102'],
        upload: [],
        textarea: '666',
        editor: '<p>333</p>'
      },
      {
        id: 222,
        username: '2',
        password: '22',
        select: '222'
      },
      {
        id: 333,
        username: '3',
        password: '33',
        select: '333'
      }
    ]
    total.value = 30
  } else {
    tableData.value = [
      {
        id: 444,
        username: '4',
        password: '44'
      },
      {
        id: 555,
        username: '5',
        password: '55'
      },
      {
        id: 666,
        username: '6',
        password: '66'
      }
    ]
    total.value = 70
  }
}
// 表格新增确认
const onRowAdd = (model: any) => {
  console.log(model)
  tableData.value.push(model)
}
// 表格编辑确认
const onRowEdit = (model: any) => {
  console.log(model)
  const idx = tableData.value.findIndex((item: any) => item.id === model.id)
  tableData.value.splice(idx, 1, model)
}
// 表格行删除
const onRowDel = (model: any) => {
  const idx = tableData.value.findIndex((item: any) => item.id === model.id)
  tableData.value.splice(idx, 1)
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
}
</style>
